<!-- 审批状态，模块切换 -->
<template>
  <div class="status-warp">
    审批状态：
    <div v-for="(item,index) in statueTypes" :key="`status-${index}`" :class="['status-item', curId === item.id ? 'active':'']" @click="handleChange(item,index)">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            curId: '',
            statueTypes: [
                {
                    id: '',
                    name: '全部'
                },
                {
                    id: 1,
                    name: '审批中'
                },
                {
                    id: 3,
                    name: '审批驳回'
                },
                {
                    id: 2,
                    name: '审批通过'
                },
            ]

        }
    },
    methods: {
        handleChange(item, index) {
            this.curId = item.id
            this.$emit('update:status', this.curId)
            this.$emit('update:name', item.name)
        }
    }
}
</script>
<style scoped lang="scss">
.status-warp{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  margin-bottom: 32px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ececec;
  width: 100%;
  .status-item{
    width: 100px;
    text-align: center;
    margin: 0px 8px;
    padding: 6px 0px;
  }
  .active{
    color: #fff;
    background-color:rgba(4, 97, 255, 1) ;
    border-radius: 4px;
  }
}

</style>
